/**
 * @Name:  Sort
 * @Author:
 * @Desc:  排序方法使用
 * @Date: 2020-11-18 10:33:03
 */

import React, { Component } from "react";
import { Title } from "@/component";
import { arrInitialChart, arrNumLetter, arrPolyphone } from "./data";
import styles from "./styles.module.less";
// 逻辑：
// 01：对用户信息操作，
// 001：判断是否为汉字，英文，还是特殊字符
// charCodeAt(0)返回字符串第1位的Unicode 编码，unicode 19968-40869 为汉字
// 002：是汉字，取首字符的首字母 this.getCh();其中this.moreRead();判断是否为多音字；返回大写字母；
// 003: 是英文返回大写字母，特殊字符单独处理
// 02: 用户信息与大写字母一一对应，使用this.results();进行数组内合并
class Sort extends Component {
  /**
   * @name numSort
   * @description 数字排序+英文排序
   */
  numSort = () => {
    // let arr = [2, 5, 4, 0, 3, 5, 7, 1, 6];
    // let arrF = [2, 5, 4, 0, 3, 5, 7, 1, 6];
    let arr = ["g", "b", "s", "d", "S", "e", "f", "F", "g", "s", "A", "s", "E"];
    let arrF = ["g", "b", "s", "d", "S", "e", "f", "F", "g", "s", "A", "s", "E"];
    let str1 = JSON.stringify(arrF.sort((a, b) => (a.toUpperCase() > b.toUpperCase() ? 1 : -1)));
    let str2 = JSON.stringify(arrF.sort((a, b) => (a.toUpperCase() > b.toUpperCase() ? -1 : 1)));
    return (
      <div>
        <div>原数组：{JSON.stringify(arr)}</div>
        <div>正序：{str1}</div>
        <div>反序：{str2}</div>
      </div>
    );
  };
  /**
   * @name chSort
   * @description 中文排序
   */
  chSort = () => {
    let arr = ["周", "吴", "郑", "王", "赵", "钱", "孙", "李"];
    let arr1 = ["周", "吴", "郑", "王", "赵", "钱", "孙", "李"];
    let arr2 = ["周", "吴", "郑", "王", "赵", "钱", "孙", "李"];
    arr1.sort((a, b) => {
      return a.localeCompare(b);
    });
    arr2.sort((a, b) => {
      return b.localeCompare(a);
    });
    return (
      <div>
        <div>原数组：{JSON.stringify(arr)}</div>
        <div>正序：{JSON.stringify(arr1)}</div>
        <div>反序：{JSON.stringify(arr2)}</div>
      </div>
    );
  };
  /**
   * @name chenSort
   * @description 中文,字母混合排序
   */
  chenSort = () => {
    let arr = ["周", "g", "b", "s", "吴", "郑", "王", "赵", "钱", "孙", "李"];
    let arr1 = ["周", "g", "b", "s", "吴", "郑", "王", "赵", "钱", "孙", "李"];
    let arr2 = ["周", "g", "b", "s", "吴", "郑", "王", "赵", "钱", "孙", "李"];
    arr1.sort((a, b) => {
      return a.localeCompare(b);
    });
    arr2.sort((a, b) => {
      return b.localeCompare(a);
    });
    return (
      <div>
        <div>原数组：{JSON.stringify(arr)}</div>
        <div>正序：{JSON.stringify(arr1)}</div>
        <div>反序：{JSON.stringify(arr2)}</div>
      </div>
    );
  };
  /**
   * @name phoneList
   * @description 根据汉字首字母分类
   */
  phoneList = () => {
    //获取汉字首字母 参考：https://blog.csdn.net/guohao326/article/details/81671276
    let arr = ["赵xx", "钱xx", "孙xx", "Gxx", "李xx", "axx", "Fxx", "@#", "周xx", "%^", "吴xx", "Wxx", "郑xx", "王xx", "车xx", "龟xx"];
    let arr1 = ["赵xx", "钱xx", "孙xx", "Gxx", "李xx", "axx", "Fxx", "@#", "周xx", "%^", "吴xx", "Wxx", "郑xx", "王xx", "车xx", "龟xx"];
    let list = [];
    let noList = [{ code: "未知", name: [] }];
    for (let i = 0; i < arr1.length; i++) {
      let letter = this.screenCh(arr1[i]);
      if (Object.prototype.toString.call(letter) === "[object Array]") {
        list = list.concat(this.arrPhone(arr1[i], letter));
      } else {
        noList[0].name.push(arr1[i]);
      }
    }
    console.log("list==", list);
    list = this.results(list);
    list.sort((a, b) => {
      return a.code > b.code ? 1 : -1;
    });
    let reslist = list.concat(noList);
    return (
      <div>
        <h4>其中多音字，是根据首字母存在多个</h4>
        <div>原数组：{JSON.stringify(arr)}</div>
        <div>
          {reslist.map((item, i) => (
            <div key={item.code + i}>
              <div className={styles.letter}>{item.code}</div>
              <div>
                {item.name.map((v, index) => (
                  <div key={index} className={styles.name}>
                    {v}
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
      </div>
    );
  };
  /**
   * @name results
   * @desc 最终结果，字母相同项合并
   */
  results = (list) => {
    //数组相同项合并 https://segmentfault.com/n/1330000016503710
    const arrMerge = list.reduce((pre, curr) => {
      const eqIndex = pre.findIndex((item) => item.code === curr.code);
      if (eqIndex !== -1) {
        pre[eqIndex].name.push(...curr.name);
        return pre;
      } else {
        return [...pre, { code: curr.code, name: curr.name }];
      }
    }, []);
    return arrMerge;
  };

  /**
   * @name arrPhone
   * @param {val} str 联系人信息
   * @param {list} Array 联系人首字母
   */
  arrPhone = (val, list) => {
    let arrs = [];
    if (list.length === 1) {
      arrs = [{ code: list[0], name: [val] }];
    } else if (list.length > 1) {
      for (let i = 0; i < list.length; i++) {
        arrs.push({ code: list[i], name: [val] });
      }
    }
    return arrs;
  };

  /**
   * @name screenCh
   * @description 根据输入返回不同值
   * @param firStr 输入的字符串中的一个字符
   * @return 不是汉字(unicode 19968-40869 为汉字)，返回原字符
   * @return 是汉字且为多音字，返回汉字对应的首字母字符串
   * @return 是汉字且不为多音字，调用getCh函数，并返回汉字对应的首字母字符
   */
  screenCh = (str) => {
    let code = str.charCodeAt(0); //获取首字符unicode编码
    let firStr = str.charAt(0); //获取首字符
    let letter = ""; //返回字母
    if (code > 19968 && code < 40869) {
      letter = this.getCh(firStr);
    } else if (this.getEn(firStr)) {
      letter = [firStr.toUpperCase()];
    } else {
      //特殊字符
      letter = false;
    }
    return letter;
  };

  /**
   * @name getCh
   * @description 返回汉字对应的首字母字符
   */
  getCh = (firStr) => {
    let arr = arrInitialChart();
    let lettArr = arrNumLetter();
    let { type, val } = this.moreRead(firStr);
    let letter = [];
    if (type) {
      letter = val.split("");
    } else {
      for (let i = 0; i < arr.length; i++) {
        if (arr[i].indexOf(firStr) > -1) {
          letter = [lettArr[i].letter];
        }
      }
    }
    return letter;
  };

  /**
   * @name moreRead
   * @description 是否为多音字
   */
  moreRead = (firStr) => {
    let arr = arrPolyphone();
    let list = arr.find((v) => v.ch === firStr);
    if (list) {
      return { type: true, val: list.letter };
    } else {
      return { type: false };
    }
  };

  /**
   * @name getEn
   * @description 是否为英文字母
   */
  getEn = (firStr) => {
    let arr = arrNumLetter();
    let list = arr.find((v) => v.letter === firStr || v.letter.toLowerCase() === firStr);
    return list;
  };

  render() {
    return (
      <div>
        <h2>排序方法使用---sort方法会改变原数组</h2>
        <h4>
          参考：
          <a href="https://www.cnblogs.com/goloving/p/7662676.html" target="_blank">
            https://www.cnblogs.com/goloving/p/7662676.html
          </a>
        </h4>
        <div className={styles.block}>
          <Title text="数字排序+英文排序sort()方法--英文排序时大小写不一致，需进行大小写转换" />
          <div>{this.numSort()}</div>
        </div>
        <div className={styles.block}>
          <Title text="中文按首字母排序--sort()+localeCompare()方法" />
          <div>{this.chSort()}</div>
        </div>
        <div className={styles.block}>
          <Title text="不同类型混合排序--谁在前先对谁进行排序" />
          <div>{this.chenSort()}</div>
        </div>
        <div className={styles.block}>
          <Title text="电话簿--charAt(index)返回字符串第几位；charCodeAt(index)返回字符串第几位的Unicode 编码" />
          <div>{this.phoneList()}</div>
        </div>
      </div>
    );
  }
}

export default Sort;
